<!DOCTYPE html>
<!--  xmlns:th="http://www.thymeleaf.org" -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工信息</title>
    <link rel="stylesheet" href="/res/css/global.css">
    <link rel="stylesheet" href="/res/css/main.css">
    <link rel="stylesheet" href="/res/css/find_emp.css">
    <link rel="stylesheet" href="/res/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>

<!-- 外部容器 -->
<div id="container">
    <!-- 左边的导航 -->
    <div id="nav-list" class="left">
        <h2>
            <span></span>
            &nbsp;&nbsp;
            <span></span>
            &nbsp;&nbsp;
            <a href="/emp/logout">退出</a>
        </h2>
        <ul>
            <li><a href="/main">主页</a></li>
            <li><a href="/customer/select_customer">会员管理</a></li>
            <li><a href="/emp/select_emp">员工管理</a></li>
            <li><a href="#">二手车管理</a></li>
            <li><a href="#">门店管理</a></li>
            <li><a href="/system/main">系统设置</a></li>
        </ul>
    </div>

    <!-- 右边的div -->
    <div id="main-div" class="right">
        <h2>员工集合</h2>
        <!-- 查找员工的表单 -->
        <form action="/emp/select_emp" method="post">
            <table>
                <tr>
                    <td>查询员工：</td>
                    <td>
                        <input type="text" name="condition" placeholder="请输入员工名、门店名、角色名" th:value="${condition}"
                               style="width:260px;"/>
                    </td>
                    <td>
                        <input type="submit" value=" 员工查询 "/>
                    </td>
                    <td>
                        <input type="button" value=" 注册员工 " id="show-reg-emp-btn"/>
                    </td>
                </tr>
            </table>
        </form>
        <!-- 员工表格 -->
        <table border="1" id="dataTable">
            <thead>
            <tr>
                <th>
                    <input type="checkbox" id="check-all"/>
                </th>
                <th>编号</th>
                <th>登录名</th>
                <th>姓名</th>
                <th>性别</th>
                <th>生日</th>
                <th>电话</th>
                <th>所属门店</th>
                <th>角色</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="emp:${empList}">
                <td>
                    <!-- empid48,empid47 -->
                    <input type="checkbox" th:id="${'empid'+emp.get('id')}"/>
                </td>
                <td th:text="${emp.id}"></td>
                <td th:text="${emp.empId}"></td>
                <td th:text="${emp.empName}"></td>
                <td th:text="${emp.sex}"></td>
                <td th:if="${emp.get('birthday')!=null}" th:text="${#dates.format(emp.birthday,'yyyy-MM-dd')}">
                </td>
                <td th:if="${emp.get('birthday')==null}" th:text="未知日期"></td>
                <td th:text="${emp.phone}"></td>
                <td th:text="${emp.storeName}"></td>
                <td th:text="${emp.roleName}"></td>

                <td>
                    <a th:href="@{/emp/show_update_emp(id=${emp.id})}">
                        <i class="fa fa-pencil fa-fw"></i>
                    </a>
                    <a th:href="@{/emp/delete_emp(id=${emp.id})}"
                       onclick="return confirm('确定删除当前行吗？')">
                        <i class="fa fa-trash-o fa-fw"></i>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
        <div th:if="${#lists.size(empList)>0}">
            每页行数：
            <select style="width: 50px;" id="page-size-btn">
                <option value="2" th:selected="${2 eq pager.pageSize}">2</option>
                <option value="4" th:selected="${4 eq pager.pageSize}">4</option>
                <option value="8" th:selected="${8 eq pager.pageSize}">8</option>
            </select>
            &nbsp;&nbsp;
            第<span th:text="${pager.pageNum}"></span>页/共<span th:text="${pager.pages}"></span>页&nbsp;&nbsp;
            第<span th:text="${pager.startRow}"></span>行-第<span th:text="${pager.endRow}"></span>行&nbsp;&nbsp;
            共<span th:text="${pager.total}"></span>行
            &nbsp;&nbsp;
            <span id="pager-span">
                <a th:href="@{/emp/select_emp(currentPageNum=1,condition=${condition})}">&lt;&lt;</a>
                <a th:each="i:${#numbers.sequence(1,pager.pages)}" th:text="${i}"
                   th:class="${i==pager.pageNum}?'active':''"
                   th:href="@{/emp/select_emp(currentPageNum=${i},condition=${condition})}"></a>
                <a th:href="@{/emp/select_emp(currentPageNum=${pager.pages},condition=${condition})}">&gt;&gt;</a>
            </span>
            &nbsp;&nbsp;
            <input type="text" id="txt-pageNum" value="1" style="width: 30px;"/>&nbsp;&nbsp;
            <input type="button" id="btn-pageNum" value=" GO "/>&nbsp;&nbsp;
            <input type="button" id="btn-batch-del" value=" 批量删除 "/>

        </div>
    </div>

</div>


<!-- 员工注册DIV -->
<div id="reg-emp-div">
    <h2>注册员工</h2>
    <!--  enctype="multipart/form-data" 文件上传 -->
    <form action="/emp/reg_emp" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td>登录名：</td>
                <td>
                    <input type="text" name="empId" id="empId" placeholder="请输入员工登录名"/>
                    <span id="msg-empId"></span>
                </td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td>
                    <input type="text" name="empName" id="empName" placeholder="请输入员工姓名"/>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" value="男" checked/>男&nbsp;&nbsp;
                    <input type="radio" name="sex" value="女"/>女
                </td>
            </tr>
            <tr>
                <td>生日：</td>
                <td>
                    <input type="date" name="birthday"/>
                </td>
            </tr>
            <tr>
                <td>身份证：</td>
                <td>
                    <input type="text" name="idcard" id="idcard" placeholder="请输入员工身份证"/>
                </td>
            </tr>
            <tr>
                <td>电话：</td>
                <td>
                    <input type="text" name="phone" id="phone" placeholder="请输入员工电话"/>
                </td>
            </tr>
            <tr>
                <td>门店：</td>
                <td>
                    <select name="storeId" id="storeId">
                        <option th:each="store:${stores}" th:value="${store.id}"
                                th:text="${store.storeName}"></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>角色：</td>
                <td>
                    <select name="roleId" id="roleId">
                        <option th:each="role:${roles}" th:value="${role.id}"
                                th:text="${role.roleName}"></option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="password"/>
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" name="repassword"/>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" value=" 注册员工 "/>&nbsp;&nbsp;
                    <input type="button" value=" 取消 " id="hide-reg-emp-btn"/>
                </td>
            </tr>
        </table>
    </form>
</div>


<!-- 遮罩层div-->
<div id="lock-div"></div>


<script type="text/javascript" src="/res/jquery/jquery.js"></script>
<!-- th:inline="javascript" -->
<script type="text/javascript" th:inline="javascript">
    $(function () {


        // 隔行变色
        $("#dataTable tbody tr:nth-of-type(odd)").css("background-color", "#e0e0e0");

        // 光棒效果
        var backgroundColor;
        $("#dataTable tbody tr").hover(
            function () {
                backgroundColor = $(this).css("background-color");
                $(this).css("background-color", "#aaa");
            },
            function () {
                $(this).css("background-color", backgroundColor);
            }
        );


        // 页码跳转
        $("#btn-pageNum").click(function () {
            // 文本框中当前页码
            var currentPageNum = $("#txt-pageNum").val();
            // 必须讲el表达式放到双中括号中
            var condition = [[${condition}]];
            // 总的页数
            var pages = [[${pager.pages}]];
            if (currentPageNum < 1 || currentPageNum > pages) {
                alert("页码必须在1到" + pages + "之间！！！");
                return;
            }
            window.location.href = "/emp/select_emp?currentPageNum=" +
                currentPageNum + "&condition=" + condition;
        });

        // 多项选中,多项不选中
        $("#check-all").click(function () {
            // 当前复选框是否选中
            var flag = $(this).is(":checked");
            $("input[type='checkbox'][id^='cusid']").prop("checked", flag);
        });


        // 改变每页的行数
        $("#page-size-btn").change(function () {
            // 下拉列表框中被选中的选项
            var pageSize = $("#page-size-btn option:selected").val();

            // 请求服务器
            $.ajax({
                url: "/system/change_page_size",
                data: {    // 上传参数
                    pageSize: pageSize
                },
                dataType: "json",   // 从服务器返回json数据
                type: "get",        // 请求方式
                success: function (data) {   // 服务器成功返回执行的函数，data是返回的数据
                    //console.log(data);
                    if (data.success == true) {
                        window.location.href = "/emp/select_emp";
                    }
                }
            });

        });

        // 批量删除
        $("#btn-batch-del").click(function () {
            var empids = new Array();

            // id以empid开头
            $("input[type='checkbox'][id^='empid']").each(function () {
                // $(this)是遍历到的复选框
                if ($(this).is(':checked')) {
                    var id = $(this).prop("id").substr(5);   // 字符串下标从0开始
                    empids.push(id);
                }
            });
            if (empids.length == 0) {
                alert("必须选择至少一个员工才能删除！！！");
            } else {

                if (confirm("确认删除吗？")) {

                    $.ajax({
                        url: "/emp/batch_delete_emp",
                        data: {
                            empids: empids,
                        },
                        dataType: "json",
                        type: "post",
                        traditional: true,   // 上传数组时必须添加这个属性
                        success: function (data) {
                            console.info(data);
                            if (data.success == true) {
                                window.location.href = "/emp/select_emp";
                            } else {
                                alert("选中的员工无法删除");
                            }
                        }
                    });
                }
            }

        });

        // 显示注册员工对话框
        $("#show-reg-emp-btn").click(function () {
            $("#reg-emp-div").show(2000);
            $("#lock-div").show(2000);
        });

        // 隐藏注册会员对话框
        $("#hide-reg-emp-btn").click(function () {
            $("#reg-emp-div").hide(2000);
            $("#lock-div").hide(2000);
        });


        // 验证用户名是否存在
        $("#empName").change(function () {
            console.info($(this).val());

            $.ajax({
                url: "/emp/emp_name_exists",
                data: {
                    empName: $(this).val()
                },
                dataType: "json",
                type: "post",
                success: function (data) {
                    //console.log(data);
                    if (data.meta.success == true) {
                        $("#msg-empName").html("员工名不存在，可以注册").css("color", "green");
                    } else {
                        $("#msg-empName").html("员工名存在，不可以注册").css("color", "red");
                    }
                }
            });

        });

    });

</script>


</body>
</html>